<template>
  <div class="commodityCenter">
    <div class="title">
      <span @click="cutTitle(1)"
            :class="{'active': titleIndex === 1}">货柜中</span>
      <span @click="cutTitle(2)"
            :class="{'active': titleIndex === 2}">已上架</span>
      <span @click="cutTitle(3)"
            :class="{'active': titleIndex === 3}">回收站</span>
      <span @click="cutTitle(4)"
            :class="{'active': titleIndex === 4}">全部</span>
      <div class="title-right">
        <a-button class="title-prepare">货柜准备</a-button>
        <a-button class="title-export"
                  type="link">批量导出</a-button>
      </div>
    </div>

    <!-- 货柜中 -->
    <div class="container">
      <div class="container-form">
        <a-form-model ref="ruleForm"
                      :model="form"
                      :rules="rules"
                      :label-col="{span:6}"
                      :wrapper-col="{spanm:16}">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="物料"
                                 prop="name">
                <a-input v-model="form.name"
                         placeholder="发货编号/订单编号/物料编号"
                         style="width:200px" />
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="状态"
                                 prop="type">
                <a-select v-model="form.type"
                          placeholder="请选择证件类型"
                          style="width:200px">
                  <a-select-option v-for="item in cardTypeArr"
                                   :value="item.type"
                                   :key="item.id">
                    {{item.title}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="价格区间"
                                 prop="name">
                <a-input placeholder="最小值"
                         style="width:88px" />
                <a-icon type="minus" />
                <a-input placeholder="最大值"
                         style="width:88px" />
              </a-form-model-item>
            </a-col>
            <a-col :span="3">
              <!-- <div @click="onSearch">查询</div> -->
              <a-button @click="onSearch"
                        type="danger">查询</a-button>
              <a-button @click="resetForm">重置</a-button>

            </a-col>
          </a-row>
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="库存预警"
                                 prop="name">
                <a-input placeholder="最小值"
                         style="width:88px" />
                <a-icon type="minus" />
                <a-input placeholder="最大值"
                         style="width:88px" />
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="库存数量"
                                 prop="name">
                <a-input placeholder="最小值"
                         style="width:88px" />
                <a-icon type="minus" />
                <a-input placeholder="最大值"
                         style="width:88px" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="container-button">
        <a-button icon="download">上架</a-button>
        <a-button icon="delete">移入回收站</a-button>
        <a-button icon="gold">库存调整</a-button>
        <a-button icon="setting">价格设置</a-button>
        <a-button icon="setting">库存预警设置</a-button>
      </div>
      <div class="container-table">
        <a-table :row-selection="rowSelection"
                 :columns="columns"
                 :data-source="data"
                 :pagination="false">
          <template slot="number"
                    slot-scope="text, record, ">
            <div class="editable-row-number">
              <span>{{record.number}}</span>
            </div>
          </template>
          <template slot="xieyi"
                    slot-scope="text, record, ">
            <div class="editable-row-xieyi">
              <span>{{record.xieyi}}</span>
              <span>查看</span>
            </div>
          </template>
          <div slot="action"
               class="editable-row-action">
            <a href="">出库历史</a>
            <a href="">价格趋势</a>
          </div>
        </a-table>
        <div class="pagin">
          <span>共 <i>223</i> 页</span>
          <pagination @pageChange="pageChange"
                      :total="total"
                      :current="current"></pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

const columns = [
  {
    title: '物料编号',
    dataIndex: 'name',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '物料名称',
    dataIndex: 'age',
    width: 220,
    align: 'center',
    scopedSlots: { customRender: 'age' },
  },
  {
    title: '规格',
    dataIndex: 'address',
    width: 80,
    align: 'center',
    scopedSlots: { customRender: 'address' },
  },
  {
    title: '计量单位',
    width: 80,
    align: 'center',
    dataIndex: 'danwei',
    scopedSlots: { customRender: 'danwei' },
  },
  {
    title: '库存数量',
    width: 80,
    align: 'center',
    dataIndex: 'number',
    scopedSlots: { customRender: 'number' },
  },
  {
    title: '锁定库存',
    width: 100,
    align: 'center',
    dataIndex: 'suoding',
    scopedSlots: { customRender: 'suoding' },
  },
  {
    title: '可销售数量',
    width: 100,
    align: 'center',
    dataIndex: 'number1',
    scopedSlots: { customRender: 'number1' },
  },
  {
    title: '协议价',
    width: 80,
    align: 'center',
    dataIndex: 'xieyi',
    scopedSlots: { customRender: 'xieyi' },
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    width: 100,
    scopedSlots: { customRender: 'action' },
  },
];
const data = [
  {
    key: '1',
    name: '10090001',
    age: '混合喷嘴',
    address: '大',
    danwei: '瓶',
    number: '10',
    xieyi: '20.0-30.0',
  },
  {
    key: '2',
    name: '10090002',
    age: 'Pluesch动物玩偶',
    address: '大',
    danwei: '瓶',
    number: '10',
    xieyi: '20.0-30.0',
  },
  {
    key: '3',
    name: '10090003',
    age: '冰箱',
    address: '大',
    danwei: '瓶',
    number: '10',
    xieyi: '20.0-30.0',
  },
  {
    key: '4',
    name: '10090004',
    age: '冰箱',
    address: '大',
    danwei: '瓶',
    number: '10',
    xieyi: '20.0-30.0',
  },
];
import pagination from '@/components/common/pagination.vue'
export default {
  components: {
    pagination
  },
  data () {
    return {
      titleIndex: 1,
      data,
      columns,
      total: 1,
      current: 1,
      form: {
        name: '',
        type: '01',
      },
      cardTypeArr: [
        {
          title: '货柜中',
          type: '01',
        },
        {
          title: '已上架',
          type: '02',
        },
        {
          title: '回收站',
          type: '03',
        },
        {
          title: '全部',
          type: '04',
        },
      ],
      rules: {
        // street: [{ required: true, message: '请选择地址' }],
      }
    }
  },
  computed: {
    rowSelection () {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      };
    },
  },
  methods: {
    //切换商品状态
    cutTitle (e) {
      this.titleIndex = e
    },
    //搜索
    onSearch () { },
    // 重置
    resetForm () {
      this.$refs.ruleForm.resetFields();
    },
    pageChange (current) {
      console.log(current);
      this.current = current;
    },
  },
}
</script>
<style lang="less" scoped>
.commodityCenter {
  .title {
    width: 1016px;
    height: 48px;
    background: #ffffff;
    border-radius: 2px;
    margin-bottom: 8px;
    span {
      display: inline-block;
      cursor: pointer;
      text-align: center;
      line-height: 46px;
      font-size: 14px;
      margin: 0 16px;
      color: @colorGreyFont;
    }
    .title-right {
      height: 48px;
      float: right;
      line-height: 48px;
      > div {
        float: left;
        font-size: 14px;
        width: 80px;
        height: 32px;
        border-radius: 2px;

        line-height: 32px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
      }
      .title-export {
        background-color: @greyDeepBackground;
        margin-right: 16px;
        margin: 8px 8px 8px 0;
      }
      .title-prepare {
        background: @colorLightRed;
        color: @activeRed;
        border: 1px solid @activeRed;
        margin: 8px 8px 8px 0;
      }
    }
    .active {
      color: #d83e3e;
      font-size: 16px;
      font-weight: 500;
      font-family: PingFangSC, PingFangSC-Medium;
      border-bottom: 2px solid #d83e3e;
    }
  }
  .container {
    width: 1016px;
    background-color: #fff;
    .container-form {
      padding: 16px 16px 0;
      .ant-col-3 {
        > button {
          float: right;
          width: 56px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          font-size: 12px;
          color: @colorCommonFont;
          border-radius: 2px;
          cursor: pointer;
        }
        > button:nth-child(1) {
          background-color: @activeRed;
          color: #fff;
          margin-right: 0;
        }
        > button:nth-child(2) {
          border: 1px solid @greyBorder;
          margin-right: 8px;
        }
      }
      .anticon-minus {
        font-size: 12px;
        padding: 0 6px;
      }
    }
    .container-button {
      overflow: hidden;
      padding: 16px;
      > button {
        i {
          font-size: 10px;
          color: @colorGreyFont;
          vertical-align: 0em;
          margin-right: 4px;
        }
      }
      > button:nth-child(2) {
        width: 92px;
      }
      > button:nth-child(5) {
        width: 106px;
      }
    }
    .container-table {
      padding: 0 16px;
      overflow: hidden;
      .editable-row-xieyi {
        > span {
          display: block;
        }
        > span:nth-child(2) {
          cursor: pointer;
          color: #3b82ff;
        }
      }
      .editable-row-number {
        > span {
          width: 32px;
          height: 18px;
          background: @colorLightRed;
          border-radius: 2px;
          display: inline-block;
          color: @activeRed;
        }
      }
      .editable-row-action {
        > a {
          display: block;
          height: 12px;
          line-height: 12px;
        }
        > a:nth-child(1) {
          color: #3b82ff;
          margin-bottom: 8px;
        }
      }
      .pagin {
        span {
          margin-right: 16px;
          font-size: 12px;
          i {
            font-style: normal;
            color: @activeRed;
          }
        }
        float: right;
        padding: 24px 0 40px;
      }
    }
  }
}
button {
  float: left;
  height: 32px;
  line-height: 30px;
  border: 1px solid @greyBorder;
  padding: 0;
  color: @colorCommonFont;
  font-size: 12px;
  border-radius: 3px;
  width: 80px;
  margin-right: 8px;
}
/deep/ .ant-form {
  overflow: hidden;
  label {
    font-size: 12px;
    color: @colorCommonFont;
  }
  .ant-form-item {
    margin-bottom: 8px;
    height: 32px;
    line-height: 32px;
    .ant-form-item-label {
      height: 32px;
      line-height: 32px;
    }
    .ant-form-item-control-wrapper {
      height: 32px;
      line-height: 32px;
      .ant-form-item-control {
        line-height: 30px;
        .ant-input {
          border-radius: 3px;
        }
      }
    }
  }
}
/deep/ .ant-btn > .anticon + span,
.ant-btn > span + .anticon {
  margin-left: 4px;
}
/deep/ .ant-table-thead > tr > th {
  padding: 13px 16px !important;
}
/deep/ .ant-select-selection-selected-value {
  font-size: 12px;
}
/deep/ .ant-table-thead > tr > th .ant-table-header-column {
  font-size: 12px;
  color: @colorGreyFontM;
  line-height: 20px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 14px 0 !important;
  font-size: 12px;
}
// /deep/ .ant-table-thead > tr > th,
// .ant-table-tbody > tr > td {
// }
// /deep/ .ant-table-thead > tr > th,
// .ant-table-tbody > tr > td {
//
// }
</style>